<template>
  <div class="demo">
    <!-- <Panel title="标题" style="height: 500px; width: 500px;" /> -->
    <lsd-layout>
      <lsd-layout-container
        ref="left"
        :ratio="[1, 3]"
        height="100%"
        :top="null"
        :left="undefined"
      ></lsd-layout-container>
      <lsd-layout-container ref="right" :ratio="[1, 3.5]" height="100%" right="0"></lsd-layout-container>
      <lsd-layout-container
        :ratio="[10, 2]"
        :right="() => getStyle('right', 'width')"
        :left="() => getStyle('left', 'width')"
        bottom="0"
        direction="row"
      ></lsd-layout-container>
    </lsd-layout>
  </div>
</template>

<script>
// import Panel from '../business-component/components/panel'
/**
 * 备注信息
 * @author 朱琦
 * @date   时间：2022/
 */
export default {
  name: 'Demo',
  components: {
    // Panel
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {
    // this.refs.left
  },
  methods: {
    getStyle(refName, styleKey) {
      const v = this.$refs[refName]
      return v ? v.$el.style[styleKey] : ''
    }
  }
}
</script>

<style scoped lang="less">
.demo {
  width: 100vw;
  height: 100vh;
  .lsd-layout-container {
    background: rgb(213, 232, 246);
    border: 1px solid #ccc;
  }
}
</style>
